<template>
  <div>
    <div
      class="w-[90%] mt-4 border border-solid !border-zinc-500/50 p-4 box-border overflow-y-auto"
    >
      <div class="flex items-center gap-10">
        <div class="px-2 rounded-md border-solid border-[2px] border-[#f8cbad]">风克线</div>
        <div class="flex items-center">
          <span class="mr-4">管道沿线地温</span>
          <el-input v-model="fk_pipeTemperature" class="!w-[100px] mr-4" /><span class="">℃</span>
        </div>
      </div>
      <div class="flex items-center mt-3">
        <span class="w-32">注入油品类型</span>
        <el-select v-model="fk_inputOilType" placeholder="请选择油品种类" style="width: 250px">
          <el-option
            v-for="item in oilList"
            :key="item.id"
            :label="item.chinese_name"
            :value="item.oils_name"
          />
        </el-select>
      </div>
      <div class="mt-3">
        <div
          class="flex items-center gap-4 cursor-pointer"
          @click="fk_settingsVisible = !fk_settingsVisible"
        >
          <el-icon v-if="fk_settingsVisible" class="mr-2">
            <ArrowDown />
          </el-icon>
          <el-icon v-else class="mr-2">
            <ArrowRight />
          </el-icon>
          控制条件设置
        </div>
        <div v-show="fk_settingsVisible">
          <div class="flex items-center mt-3">
            <span class="w-32">首站出站流量</span
            ><el-input v-model="fk_outFlow" class="!w-[250px] mr-4" /><span class="">m³/h</span>
          </div>
          <div class="flex items-center mt-3">
            <span class="w-32">首站出站温度</span
            ><el-input v-model="fk_outTemp" class="!w-[250px] mr-4" /><span class="">℃</span>
          </div>
          <div class="flex items-center mt-3">
            <span class="w-32">末站进站压力</span
            ><el-input v-model="fk_inPres" class="!w-[250px] mr-4" /><span class="">MPa</span>
          </div>
        </div>
      </div>
      <div class="mt-6">
        <div class="flex items-center gap-4">
          <img :src="rightIcon" class="w-6 h-5" />
          泵机组配置
        </div>
        <div class="w-4/5 mt-4 text-base bg-white">
          <div class="flex h-[50px]">
            <div
              class="bg_table_header flex items-center justify-center border w-[120px] box-border"
            >
              泵站
            </div>
            <div
              class="box-border flex items-center justify-center flex-1 bg_table_header topBorder bottomBorder rightBorder"
            >
              泵配置
            </div>
          </div>
          <div class="flex h-[40px]">
            <div
              class="flex items-center justify-center rightBorder bottomBorder leftBorder2 w-[120px] box-border"
            >
              泵站1
            </div>
            <div class="flex items-center flex-1 px-5 rightBorder bottomBorder">
              <div class="flex justify-between w-full">
                <div><el-checkbox v-model="fk_pump1">P-1</el-checkbox></div>
                <div><el-checkbox v-model="fk_pump2">P-2</el-checkbox></div>
                <div><el-checkbox v-model="fk_pump3">P-3</el-checkbox></div>
                <div><el-checkbox v-model="fk_pump4">P-4</el-checkbox></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div
      class="w-[90%] mt-4 border border-solid !border-zinc-500/50 p-4 box-border overflow-y-auto"
    >
      <div class="flex items-center gap-10">
        <div class="px-2 rounded-md border-solid border-[2px] border-[#f8cbad]">新81#线</div>
        <div class="flex items-center">
          <span class="mr-4">管道沿线地温</span>
          <el-input v-model="in701_pipeTemperature" class="!w-[100px] mr-4" /><span class=""
            >℃</span
          >
        </div>
      </div>
      <div class="mt-3">
        <div
          class="flex items-center gap-4 cursor-pointer"
          @click="in701_settingsVisible = !in701_settingsVisible"
        >
          <el-icon v-if="in701_settingsVisible" class="mr-2">
            <ArrowDown />
          </el-icon>
          <el-icon v-else class="mr-2">
            <ArrowRight />
          </el-icon>
          控制条件设置
        </div>
        <div v-show="in701_settingsVisible">
          <div class="flex items-center mt-3">
            <span class="w-32">末站进站流量</span
            ><el-input v-model="in701_inQ" class="!w-[250px] mr-4" /><span class="">m³/h</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ArrowRight, ArrowDown } from '@element-plus/icons-vue'
import rightIcon from '@/assets/images/rightIcon.png'
const props = defineProps({
  oilList: { type: Array }
})

// 响应式数据
const fk_settingsVisible = ref(false)
const fk_pipeTemperature = ref('16')
const fk_inputOilType = ref('FCCCY')
const fk_outFlow = ref('340')
const fk_outTemp = ref('85')
const fk_inPres = ref('0.4')
const fk_pump1 = ref(false)
const fk_pump2 = ref(true)
const fk_pump3 = ref(true)
const fk_pump4 = ref(false)
const in701_settingsVisible = ref(false)
const in701_pipeTemperature = ref('16')
const in701_inQ = ref('180')

const validateSettings = () => {
  const Fields = [
    { value: fk_pipeTemperature.value, name: '风克线管道沿线地温' },
    { value: fk_inputOilType.value, name: '风克线注入油品' },
    { value: fk_outFlow.value, name: '风克线首站出站流量' },
    { value: fk_outTemp.value, name: '风克线首站出站温度' },
    { value: fk_inPres.value, name: '风克线末站进站压力' },
    { value: in701_pipeTemperature.value, name: '进701支线管道沿线地温' },
    { value: in701_inQ.value, name: '进701支线末站进站流量' }
  ]

  for (const field of Fields) {
    if (!field.value) {
      ElMessage.error(`${field.name}不能为空`)
      return false
    }
  }

  return true
}

const isFormValid = computed(() => {
  const Fields = [
    fk_pipeTemperature.value,
    fk_inputOilType.value,
    fk_outFlow.value,
    fk_outTemp.value,
    fk_inPres.value,
    in701_pipeTemperature.value,
    in701_inQ.value
  ]
  if (!Fields.every((field) => field)) return false

  return true
})

const getParamsData = () => {
  return {
    T_g_WBX: fk_pipeTemperature.value,
    Oil_in: fk_inputOilType.value,
    Q_S_OUT: fk_outFlow.value,
    T_S_OUT: fk_outTemp.value,
    P_M_IN: fk_inPres.value,
    PUMP1: fk_pump1.value,
    PUMP2: fk_pump2.value,
    PUMP3: fk_pump3.value,
    PUMP4: fk_pump4.value,
    T_g_BKX: in701_pipeTemperature.value,
    Q_FS: in701_inQ.value
  }
}

// 暴露给父组件的方法和数据
defineExpose({
  validateSettings,
  isFormValid,
  getParamsData
})
</script>

<style lang="scss" scoped>
.leftBorder {
  border-left: 1px dashed black;
  border-image: repeating-linear-gradient(
      to bottom,
      black 0,
      black 8px,
      transparent 8px,
      transparent 16px
    )
    1;
}
.border {
  border: 1px solid black;
}
.rightBorder {
  border-right: 1px solid black;
}
.bottomBorder {
  border-bottom: 1px solid black;
}
.topBorder {
  border-top: 1px solid black;
}
.leftBorder2 {
  border-left: 1px solid black;
}

.bottomDashBorder {
  border-bottom: 1px dashed rgba(53, 63, 64, 0.4);
  border-image: repeating-linear-gradient(
      to right,
      rgba(53, 63, 64, 0.4) 0,
      rgba(53, 63, 64, 0.4) 8px,
      transparent 8px,
      transparent 16px
    )
    1;
}

.shadow {
  box-shadow: 3px 3px 11px 0px rgba(0, 0, 0, 0.15);
}
:deep(.no-style-input) {
  .el-input__wrapper {
    background: none;
    box-shadow: none;
    padding: 0;
  }

  .el-input__inner {
    border: none;
    background: none;
  }
}

.line {
  background: linear-gradient(
    to right,
    rgba(53, 63, 64, 0),
    rgba(53, 63, 64, 1),
    rgba(53, 63, 64, 0)
  );
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.bg_detail {
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
}

.bg_table_header {
  // background-color: rgba(247, 247, 247, 1);
}

.custom-button {
  background-color: rgba(69, 122, 178, 0.18);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  border: 1px solid rgba(69, 122, 178, 1);
  border-radius: 6px;
  color: rgba(69, 122, 178, 0.8);
  width: 140px;
  height: 40px;

  cursor: pointer;
  &:hover {
    background-color: rgba(69, 122, 178, 1);
    border: 1px solid rgba(69, 122, 178, 1);
    color: white;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    border-radius: 6px;
  }
}

.custom-button-not-active {
  cursor: not-allowed;
  background-color: rgba(128, 128, 128, 0.58);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  border: 1px solid gray;
  border-radius: 6px;
  color: white;
  width: 140px;
  height: 40px;
  &:hover {
    background-color: gray;
    border: 1px solid gray;
    color: white;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    border-radius: 6px;
  }
}

.border_blue {
  border: 2px solid rgba(69, 122, 178, 1);
}
</style>
